"use strict";

import {
    //核心
    React, Enhance, Controller, Component, $, EventEmitter,
    //
    tools, classnames,
    // 组件
    Table, TabPage, Lang, Dialog, Tree,
    Form, Page, Upload, Icon, Grid,
    BoxWidget, Input, Button, Prompt, Link, Loaders, Editor, Resource, Directive, Lock, Fix, Http
} from 'admin';

import debug from 'debug';
import valid from '../validate/admin.json';

import Cars from '../widget/w-cars';
import Brand from '../widget/w-brand';
import Carmodels from '../widget/w-carmodels';

var {http, date, time} = tools;
const log = debug('ysw.article');

/**
 *
 */
class ClientController extends Controller {
    static cache = null;
    state = {
        agree: [
            {title: '是', value: 1},
            {title: '否', value: 0}
        ],
        //unit: [
        //    {title: 10201008, value: 10201008},
        //    {title: 10201009, value: 10201009},
        //],
        table1: {
            update: {},
            query: {},
            types: {
                agree: function (data, options) {
                    // debugger;
                    if (data.val == 1)
                        return <span>是</span>;
                    if (data.val == 0)
                        return <span>否</span>;

                }
            },
            onRowClick: this._handlerRowClick,
            buttons: {
                'edit': {
                    onClick: this._handlerEditDialog
                }
            },
            pk: 'id',
            fields: [
                {
                    title: "#",
                    width: 1,
                    type: {
                        name: "#"
                    }
                },
                {
                    order: -1,
                    name: 'id',
                    width: 1,
                    display: false
                },
                {
                    order: 0,
                    name: 'code'
                },
                {
                    name: 'name',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'address'
                },
                {
                    name: 'contacts',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'tel'
                },
                {
                    name: 'contacts2',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'tel2'
                },
                {
                    name: 'contacts3',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'tel3'
                },
                {
                    name: 'bank',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'b_code'
                },
                {
                    name: 's_code',
                    order: 0,
                },
                {
                    name: 'time',
                    order: 0,
                    type: {
                        name: 'date'
                    }
                },
                {
                    order: 0,
                    name: 'agree',
                    type: {
                        name: 'agree'
                    }
                },
                {
                    name: 'content',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'brand'
                },
                {
                    name: 'model',
                    order: 0,
                },
                {
                    name: 'card',
                    order: 0,
                },
                {
                    order: 0,
                    name: 'vin'
                },
                {
                    name: 'engine',
                    order: 0,
                },
                {
                    name: 'color',
                    order: 0,
                },
                {
                    name: 'in',
                    order: 0,
                },
                {
                    name: 'c_time',
                    order: 0,
                    type: {
                        name: 'date'
                    }
                },
                {
                    order: 0,
                    name: 'g_time',
                    type: {
                        name: 'date'
                    }
                }
            ]
        },
        row: {},
        edit: {},
        add: {},
        model:{},
        saveButton: null,
        updateButton: null
    }
    
    /**
     * 在componentWillMount()在挂载发生之前立即被调用。
     */
    componentWillMount() {
    
    }

    componentDidMount() {
        // this.refs.http
        //     .send(`${window.SERVER_URL}/${this.props.module}/client/get_car_model`)
        //     .success((data)=>{
        //         this.setState({model:data})
        //     })
    }
    /**
     *
     */
    constructor() {
        super();
    }
    
    render() {
        var {edit, row} = this.state;
        var config = {
            height: 568,
            heightMax: 568,
            width: 320,
        }
        
        return (
            <Grid>
                <Grid col="12 12 12 12">
                    {this.renderTable1()}
                </Grid>
                {/*添加*/}
                {this.renderAddDialog()}
                {/*编辑*/}
                {this.renderEditDialog()}
                <Brand ref="brand" onCache={() => { this.forceUpdate() }}></Brand>
                <Carmodels ref="carmodels" onCache={() => { this.forceUpdate() }}></Carmodels>
                <Cars ref="cars" onCache={() => {this.forceUpdate()}}></Cars>
            </Grid>
        );
    }

    /**
     *
     * @return {*}
     */
    renderTable1() {
        return (
            <BoxWidget
                color="3"
                className="table-height scroll"
            >
                <div data-fix="buttons">
                    <Button onClick={this._handlerAddDialog}>
                        <Icon icon="add"></Icon>
                        <Lang lang="add"></Lang>
                    </Button>
                </div>
                <div data-fix="content">
                    <Http ref="http"/>
                    <Lock>
                        <Table ref="table" {...this.props} {...this.state.table1}/>
                    </Lock>
                </div>
            </BoxWidget>
        );
    }

    /**
     *
     * @return {*}
     */
    renderAddDialog() {
        let {add} = this.state;
        return (
            <Directive name="Modal">
                <Dialog
                    size={1}
                    ref="addDialog"
                    title={this._lang("add")}
                >
                    <div data-fix="elem">
                        <Form
                            action={this._action('do_add')}
                            onSuccess={this._handlerAddSuccess}
                            rules={{
                                "code": "required",
                                "name": "required",
                                "contacts": "required",
                                "tel": "required|mobile",
                                // "tel2": "mobile",
                                // "tel3": "mobile",
                                "card": "required",
                                "brand_id": "required"
                            }}
                        />
                    </div>
                    <div data-fix="content">
                        <Grid col="6 6 6 6">
                            <Input type="text" name="code" message={this._lang("code")}/>
                            <Input type="text" name="name" message={this._lang("name")}/>
                            <Input type="text" name="address" message={this._lang("address")}/>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts" message={this._lang("contacts")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel" message={this._lang("tel")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts2" message={this._lang("contacts2")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel2" message={this._lang("tel2")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts3" message={this._lang("contacts3")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel3" message={this._lang("tel3")}/>
                            </Grid>
                            <Input type="text" name="bank" message={this._lang("bank")}/>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="b_code" message={this._lang("b_code")}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="s_code" message={this._lang("s_code")}/>
                            </Grid>
                            <Input type="select" name="agree" message={this._lang("agree")} option={this.state.agree} placeholder="Please select"/>

                        </Grid>
                        <Grid col="6 6 6 6">
                            <Input type="select"
                                   name="brand_id"
                                   option={Brand.cache||[]}
                                   message={this._lang("brand")}
                                   model={add}
                                   onValueChange={() => {
                                        this.forceUpdate()
                                    }} placeholder="Please select">
                                <div data-fix="buttons">
                                    <Button onClick={this._handlerAddBrandDialog}>
                                        <Icon icon="add"></Icon>
                                        <Lang lang="添加品牌"></Lang>
                                    </Button>
                                </div>
                            </Input>
                            <Input type="select"
                                   name="series_id"
                                   option={Cars.cache||[]}
                                   message={this._lang("series")}
                                   onValueChange={() => {
                                       this.forceUpdate()
                                   }}
                                   group={add.brand_id}
                                   model={add}
                                   placeholder="Please select"/>
                            <Input type="select" name="model_id"
                                   option={Carmodels.cache||[]}
                                   message={this._lang("model")}
                                   group={add.series_id}
                                   model={add}
                                   placeholder="Please select"/>
                            <Input type="text" name="card" message={this._lang("card")}/>
                            <Input type="text" name="vin" message={this._lang("vin")}/>
                            <Input type="text" name="engine" message={this._lang("engine")}/>
                            <Input type="text" name="color" message={this._lang("color")}/>
                            <Input type="text" name="in" message={this._lang("in")}/>
                            <Input type="date" name="c_time" message={this._lang("c_time")}/>
                            <Input type="date" name="g_time" message={this._lang("g_time")}/>
                        </Grid>
                        <Input type="text" name="content" message={this._lang("content")}/>
                    </div>
                    <div data-fix="buttons">
                        <Button type="submit">
                            <Lang lang="submit"></Lang>
                        </Button>
                    </div>
                </Dialog>
            </Directive>
        );
    }

    /**
     *
     * @return {*}
     */
    renderEditDialog() {
        var {edit} = this.state;
        return (
            <Directive name="Modal">
                <Dialog
                    ref="editDialog"
                    title={this._lang("edit")}
                >
                    <div data-fix="elem">
                        <Form
                            action={this._action('do_edit')}
                            onSuccess={this._handlerEditSuccess}
                            rules={{
                                "code": "required",
                                "name": "required",
                                "contacts": "required",
                                "tel": "required|mobile",
                                // "tel2": "mobile",
                                // "tel3": "mobile",
                                "card": "required",
                                "brand_id": "required"
                            }}
                        />
                    </div>
                    <div data-fix="content">
                        <Grid col="6 6 6 6">
                            <Input name="id" type="hidden" model={edit} />
                            <Input type="text" name="code" message={this._lang("code")} model={edit}/>
                            <Input type="text" name="name" message={this._lang("name")} model={edit}/>
                            <Input type="text" name="address" message={this._lang("address")} model={edit}/>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts" message={this._lang("contacts")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel" message={this._lang("tel")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts2" message={this._lang("contacts2")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel2" message={this._lang("tel2")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="contacts3" message={this._lang("contacts3")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="tel3" message={this._lang("tel3")} model={edit}/>
                            </Grid>
                            <Input type="text" name="bank" message={this._lang("bank")} model={edit}/>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="b_code" message={this._lang("b_code")} model={edit}/>
                            </Grid>
                            <Grid col="6 6 6 6">
                                <Input type="text" name="s_code" message={this._lang("s_code")} model={edit}/>
                            </Grid>
                            <Input type="select" name="agree" message={this._lang("agree")} option={this.state.agree} model={edit} placeholder="Please select"/>
                        </Grid>
                        <Grid col="6 6 6 6">
                            <Input type="select"
                                   name="brand_id"
                                   option={Brand.cache||[]}
                                   message={this._lang("brand")}
                                   model={edit}
                                   onValueChange={() => {
                                       this.forceUpdate()
                                   }} placeholder="Please select">
                                <div data-fix="buttons">
                                    <Button onClick={this._handlerAddBrandDialog}>
                                        <Icon icon="add"></Icon>
                                        <Lang lang="添加品牌"></Lang>
                                    </Button>
                                </div>
                            </Input>
                            <Input type="select"
                                   name="series_id"
                                   option={Cars.cache||[]}
                                   message={this._lang("series")}
                                   onValueChange={() => {
                                       this.forceUpdate()
                                   }}
                                   group={edit.brand_id}
                                   model={edit}
                                   placeholder="Please select"/>
                            <Input type="select" name="model_id"
                                   option={Carmodels.cache||[]}
                                   message={this._lang("model")}
                                   group={edit.series_id}
                                   model={edit}
                                   placeholder="Please select"/>
                            <Input type="text" name="card" message={this._lang("card")} model={edit}/>
                            <Input type="text" name="vin" message={this._lang("vin")} model={edit}/>
                            <Input type="text" name="engine" message={this._lang("engine")} model={edit}/>
                            <Input type="text" name="color" message={this._lang("color")} model={edit}/>
                            <Input type="text" name="in" message={this._lang("in")} model={edit}/>
                            <Input type="date" name="c_time" message={this._lang("c_time")} model={edit}/>
                            <Input type="date" name="g_time" message={this._lang("g_time")} model={edit}/>
                        </Grid>
                        <Input type="text" name="content" message={this._lang("content")} model={edit}/>
                    </div>
                    <div data-fix="buttons">
                        <Button type="submit">
                            <Lang lang="submit"></Lang>
                        </Button>
                    </div>
                </Dialog>
            </Directive>
        );
    }

    _handlerAddBrandDialog() {
        this.refs.brand.showAddDialog()
    }
    /**
     *
     * @private
     */
    _handlerAddDialog() {
        this.refs.addDialog.show();
    }
    
    /**
     *
     * @param edit
     * @private
     */
    _handlerEditDialog(edit) {
        this.setState({edit}, function () {
            this.refs.editDialog.show();
        })
    }
    
    /**
     *
     * @param data
     * @private
     */
    _handlerAddSuccess(data) {
        if (data) {
            this.refs.table.append(data);
            this.refs.addDialog.hide();
        }
    }
    
    
    /**
     *
     * @param update
     * @private
     */
    _handlerEditSuccess(data) {
        if (data) {
            this.refs.table.update(data);
            this.refs.editDialog.hide();
        }
    }
    
    /**
     * 表单查询
     * @param data
     * @returns {boolean}
     * @private
     */
    _handlerQuery(data) {
        this.refs.table.query(data);
        return false;
    }
    
}

export default Enhance(ClientController);
